{extend name='base' /}

{block name="main"}
<div class="main-panel">
    <div class="content">
        <div class="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="form-group form-inline">
                                <div class="col-md-12 p-0">
                                    <select name="class_id" id="class_id" class="form-control">
                                        <option value="">所属年级</option>
                                        <?php foreach($class as $k => $v) {?>
                                        <option value="<?php echo $v['id']?>" {if $v['id']==$class_id}selected{/if}><?php echo $v['name']?></option>
                                        <?php }?>
                                    </select>
                                    <select name="class_id" id="course_id" class="form-control">
                                        <option value="">所属课程</option>
                                        <?php foreach($course as $k => $v) {?>
                                        <option value="<?php echo $v['id']?>" {if $v['id']==$course_id}selected{/if}><?php echo $v['name']?></option>
                                        <?php }?>
                                    </select>
                                    <input type="hidden" name="id" id="stu_id" value="{$id}">
                                    <button type="button" class="btn btn-success" onclick="search();">搜索</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <canvas id="chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>

    const labels = JSON.parse('<?php echo $labels?>');
    const datasets = JSON.parse('<?php echo $data?>');
    const data = {
        labels: labels,
        datasets: datasets
    };
    const config = {
        type: 'line',
        data: data,
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                }
            }
        },
    };

    var ctx = document.getElementById('chart').getContext('2d');
    new Chart(ctx, config);

    function search() {
        window.location.href="?id="+$('#stu_id').val()+"&class_id="+$("#class_id").val()+'&course_id='+$("#course_id").val();
    }
</script>
{/block}